<template>
  <div class="app-container">
    <div class="search_container_warp">
      <el-form
        ref="queryFormRef"
        class="search_container"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item prop="keywords" label="赛项名称">
          <el-input
            class="search_query"
            v-model="queryParams.competitionName"
            clearable
            @keyup.enter="queryFn"
        /></el-form-item>

        <el-form-item>
          <el-button type="primary" @click="queryFn"
            ><i-ep-search />搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table
        ref="dataTableRef"
        class="customTableClass"
        v-loading="loading"
        :data="dataList"
        highlight-current-row
        border
      >
        <el-table-column label="序号" type="index" align="center" width="60" />
        <el-table-column
          label="赛项名称"
          prop="competitionName"
          min-width="240"
        />
        <el-table-column
          label="组别"
          prop="matchGroup"
          align="center"
          width="90"
        />
        <el-table-column
          label="开始时间"
          prop="startTime"
          align="center"
          width="100"
        />
        <el-table-column
          label="参赛人数"
          prop="entryNumber"
          align="center"
          width="90"
        >
          <template #default="scope">
            <span class="clickLinkClass" @click="gotoPage(scope.row, 1)">
              {{ scope.row.entryNumber }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="完赛人数"
          prop="finishNumber"
          align="center"
          width="90"
        >
          <template #default="scope">
            <span class="clickLinkClass" @click="gotoPage(scope.row, 2)">
              {{ scope.row.finishNumber }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="进行中"
          prop="inProgressNumber"
          align="center"
          width="90"
        >
          <template #default="scope">
            <span class="clickLinkClass" @click="gotoPage(scope.row, 3)">
              {{ scope.row.inProgressNumber }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="未开始"
          prop="notStartedNumber"
          align="center"
          width="90"
        >
          <template #default="scope">
            <span class="clickLinkClass" @click="gotoPage(scope.row, 4)">
              {{ scope.row.notStartedNumber }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="完成率"
          prop="completionRrate"
          align="center"
          width="90"
        >
          <template #default="scope">
            {{ scope.row.completionRrate }}%
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getExamList } from "@/api/examProgress";
import { ItemPageVO, ItemForm } from "@/api/examProgress/types";
import { Options } from "@/api/examPaperManagement/types";
import { queryFilter, computeHeiht } from "@/utils/index";
const router = useRouter();

defineOptions({
  name: "ExamProgress",
  inheritAttrs: false,
});
const queryFormRef = ref(ElForm);
const dataList = ref<ItemPageVO[]>([]);
const originaldataList = ref<ItemPageVO[]>([]);

const loading = ref(false);

const queryParams = reactive<ItemPageVO>({});

/** 查询 */
function queryFn() {
  let { competitionName } = queryParams;
  let arr: Options[] = [
    { label: "competitionName", value: competitionName || "" },
  ];
  if (competitionName) {
    dataList.value = queryFilter(originaldataList.value, arr);
  } else {
    handleQuery();
  }
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  getExamList(queryParams)
    .then(({ data }) => {
      dataList.value = data;
      originaldataList.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
}
/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}

function gotoPage(data: ItemForm, type: any) {
  router.push(
    `/systemManagement/examProgressDetails?id=${data.id}&name=${data.competitionName || ""}&type=${type}`
  );
}

onMounted(() => {
  handleQuery();
  computeHeiht();
});
</script>
